<template>
  <div id="print" class="print-landscape">
    <div class="no-print" style="text-align: right">
      <a-button v-print="'#print'" ghost type="primary">打印</a-button>
    </div>
    <table class="page-wrap" cellspacing="0" cellpadding="0">
      <thead id="head">
        <tr>
          <th>
            <span>江南布衣<span>+</span></span>
            <span style="font-size: 15px;margin-left: 15px;margin-bottom: 5px;">JNBY GROUP</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="content">
            <div v-for="(item, index) in dataList" :key="index">
              <p style="font-size: 20px;text-align:right;margin-bottom:0;margin-right: 20px;color: black">
                {{ index * 2 + 1 + '/' + (dataList.length * 2) }}</p>
              <div style="width:100%;" id="imgtitle">
                <p style="font-size: 20px;text-align:center;color: black">{{ index + 1 + '/' + dataList.length + ' ' +
                  item.code }}</p>
              </div>

              <div id="imgs">
                <div class="left">
                  <div>
                    <div style=" width: 100%;">
                      <img style="-webkit-touch-callout: none; pointer-events: none"
                        v-for="(imgitem, index) in item.colors" :key="`${index}`" :style="{
                            width: item.colors.length == 1 ? '550px' : item.colors.length <= 4 ? '300px' : item.colors.length <= 6 ? '260px' : item.colors.length <= 16 ? '180px' : '140px',
                            height: item.colors.length == 1 ? '550px' : item.colors.length <= 4 ? '300px' : item.colors.length <= 6 ? '260px' : item.colors.length <= 16 ? '180px' : '140px',
                            margin: '0 10px 10px 10px',
                            objectFit: 'scale-down',
                            background: '#fafafa',
                            position: 'relative',
                          }" :src="imgitem.images[0].url"
                        onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'" />
                    </div>

                    <div id="patternText" style="line-height: 1.5em;color:black">
                      <p>图案名称: {{ item.name }}</p>
                      <p>平面设计师:{{ item.designerUserName }}</p>
                      <p>货季: {{ item.season }}</p>
                      <p>描述: {{ item.remarks }}</p>
                      <p>含义: {{ item.meaning }}</p>
                      <p v-if="item.source == 1">来源: 原创</p>
                      <p v-if="item.source == 2">来源: 借鉴</p>
                      <p v-if="item.source == 3">来源: 出处</p>
                      <p>是否有英文: {{ item.whetherHasEnglish == 1 ? '是' : '否' }}</p>
                      <p v-if="item.whetherHasEnglish == '1'">英文原文: {{ item.englishOriginal }}</p>
                      <p v-if="item.whetherHasEnglish == '1'">英文解释: {{ item.englishExplain }}</p>
                      <p>是否有敏感风险: {{ item.riskFlag == 1 ? '是' : '否' }}</p>
                      <div v-if="item.riskFlag == 1" style="display:flex">敏感风险: <div v-for="(risk, index) in item.risk"
                          :key="index" style="margin-left:5px">

                          <div v-for="(subitem, index) in riskList" :key="index">
                            <p v-if="subitem.value == risk">
                              {{ subitem.title }}
                            </p>
                          </div>
                        </div>
                      </div>
                      <p>创作过程: {{ item.creativeProcess }}</p>
                      <p>创作完成时间: {{ item.creativeCompleteDate }}</p>
                      <p>创作完成地点: {{ item.creativeCompleteLocation }}</p>
                      <p>作品首次发表时间: {{ item.firstPublishDate }}</p>
                      <p>首次发表地点: {{ item.firstPublishLocation }}</p>
                    </div>
                  </div>

                </div>
                <div class="right">
                  <a-list item-layout="horizontal" :data-source="item.elements" id="two-ele">
                    <a-list-item slot="renderItem" slot-scope="elementItem" class="item" :style="{
                        width: item.elements.length > 6 ? '49%' : '100%'
                      }">
                      <div style="width:45%;height:120px;background:#fff;padding:5px 0;">
                        <img :src="elementItem.url ? elementItem.url : 'https://img.bzhz.jnbygroup.com/cloth.png'"
                          :alt="elementItem.id" />
                      </div>
                      <div class="content">
                        <p>元素名称: {{ elementItem.name }}</p>
                        <p>描述: {{ elementItem.description }}</p>
                      </div>
                    </a-list-item>
                  </a-list>
                </div>
              </div>
              <div id="skc" class="color: black;">

                <div>
                  <p style="font-size: 20px;text-align:right;margin-bottom:0;margin-right: 20px;">
                    {{ index * 2 + 2 + '/' + (dataList.length * 2) }}</p>
                  <p style="font-size: 20px;text-align:center">{{ index + 1 + '/' + dataList.length + ' ' + item.code }}
                  </p>
                  <p>关联SKC<span style="color: #f44336;font-size: 12px;">红色字体为该款已下架</span></p>
                  <div style="display:flex;" id="table">

                    <a-table bordered size="small" style="width:50%;color: black" :columns="skccolumns"
                      :data-source="item.leftList" row-key="record => record._id"
                      :row-class-name="record => record.unSale == '是' ? 'table-color' : ''" :pagination="false"
                      :scroll="{ x: true }">
                      <span slot="style" slot-scope="txt, record">
                        {{ record.style }}{{ record.colorCode }}
                      </span>
                      <span slot="sampleCode" slot-scope="txt, record">
                        {{ record.sampleCode }}{{ record.colorCode }}
                      </span>
                      <template slot="image" slot-scope="txt, record">
                        <div style="display:flex;height:60px">
                          <img
                            :src="'https://bzhz.jnbygroup.com/jnbyimages/' + item.brandCode + '/skc/thumbs/' + record.skcCode.replace('-ZJ', '').replace('-G', '') + '.png'"
                            onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                            :alt="record.skcCode.replace('-ZJ', '').replace('-G', '')"
                            style="cursor:pointer;width: 48%;objectFit: scale-down" />
                          <img
                            :src="'https://bzhz.jnbygroup.com/jnbyimages/back/' + item.brandCode + '/skc/thumbs/' + record.skcCode.replace('-ZJ', '').replace('-G', '') + '.png'"
                            onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                            :alt="record.skcCode.replace('-ZJ', '').replace('-G', '')"
                            style="cursor:pointer;width: 48%;objectFit: scale-down" />
                        </div>
                      </template>
                      <template slot="two" slot-scope="txt, record">
                        {{ record.inQty - record.saleQty }}
                      </template>
                    </a-table>
                    <a-table bordered v-if="item.rightList.length > 0" size="small" style="width:50%;color: black"
                      :columns="skccolumns" :data-source="item.rightList" :pagination="false"
                      row-key="record => record._id" :row-class-name="record => record.unSale == '是' ? 'table-color' : ''"
                      :scroll="{ x: true }">
                      <span slot="style" slot-scope="txt, record">
                        {{ record.style }}{{ record.colorCode }}
                      </span>
                      <span slot="sampleCode" slot-scope="txt, record">
                        {{ record.sampleCode }}{{ record.colorCode }}
                      </span>
                      <template slot="image" slot-scope="txt, record">
                        <div style="display:flex;height:60px">
                          <img
                            :src="'https://bzhz.jnbygroup.com/jnbyimages/' + item.brandCode + '/skc/thumbs/' + record.skcCode.replace('-ZJ', '').replace('-G', '') + '.png'"
                            onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                            :alt="record.skcCode.replace('-ZJ', '').replace('-G', '')"
                            style="cursor:pointer;width: 48%;objectFit: scale-down" />
                          <img
                            :src="'https://bzhz.jnbygroup.com/jnbyimages/back/' + item.brandCode + '/skc/thumbs/' + record.skcCode.replace('-ZJ', '').replace('-G', '') + '.png'"
                            onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                            :alt="record.skcCode.replace('-ZJ', '').replace('-G', '')"
                            style="cursor:pointer;width: 48%;objectFit: scale-down" />
                        </div>
                      </template>
                      <template slot="two" slot-scope="txt, record">
                        {{ record.inQty - record.saleQty }}
                      </template>
                    </a-table>

                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>

          </td>
        </tr>
      </tbody>

      <tfoot id="head">
        <tr>
          <td>
            <span>Better Design Better Life/</span>
          </td>
        </tr>
      </tfoot>
    </table>
    <div>
      <a-spin tip="Loading..." v-if="loading">
        <div class="spin-content">
          加载中。。。
        </div>
      </a-spin>
    </div>
  </div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
  let table = document.getElementById('content'),
    htm = '页面内容……将tbody>td作为页面内容区，按需填放内容'
  for (let i = 0; i < 100; i++) {
    htm += '<div>页面内容' + (i + 1) + '</div>'
  }
  table.innerHTML = htm
})
</script>
<script>
const skccolumns = [
  {
    title: '图片',
    width: '20%',
    scopedSlots: { customRender: 'image' }
  },
  {
    title: '款色号',
    width: 140,
    scopedSlots: { customRender: 'style' }
  },
  {
    title: '波段',
    width: 60,
    dataIndex: 'band'
  },
  {
    title: '样衣色号',
    width: 110,
    scopedSlots: { customRender: 'sampleCode' }
  },
  {
    title: '入库',
    dataIndex: 'inQty'
  },
  {
    title: '零售',
    dataIndex: 'saleQty'
  },
  {
    title: '库存',
    scopedSlots: { customRender: 'two' }
  }
]
const riskList = [
  {
    title: '原创／著作问题',
    value: '10'
  },
  {
    title: '社会和谐',
    value: '20'
  },
  {
    title: '政治敏感',
    value: '30'
  },
  {
    title: '文化歧视',
    value: '40'
  },
  {
    title: '语言问题',
    value: '50'
  },
  {
    title: '未成年问题',
    value: '60'
  }
]
import { getexamineList } from '@api/pattern/index.js'

export default {
  data() {
    return {
      loading: false,
      riskList,
      dataList: [],
      data: [],
      riskFlag: '',
      risks: [],
      bandLeft: [],
      skccolumns,
      bandRight: [],
      showSkc: true
    }
  },
  created(){

  },
  mounted() {
    this.loadData()
    var style = '<style type="text/css">@media print {html{ zoom:0.7;}}</style>';
        var ele = document.createElement('div');
        ele.innerHTML = style;
        document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
  },
  beforeDestroy(){
    var style = '<style type="text/css">@media print {html{ zoom:1;}}</style>';
        var ele = document.createElement('div');
        ele.innerHTML = style;
        document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
  },
  computed: {
    season() {
      return this.$route.query.season || ''
    },
    brand() {
      return this.$route.query.brand || ''
    },
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },

  methods: {
    async loadData() {
      this.loading = true
      const data = {
        examineStatus: '0',
        jobNumber: this.jobNumber,
        childList: [],
        brand: this.brand,
        season: this.season,
        code: ''
      }
      try {
        const res = await getexamineList('print', data)
      if (res.code == 200) {
        if (!res.data.length) {
          this.$message.warning('无数据')
        } else {
          res.data
            .filter(item => {
              return item.relationSkc.length > 0
            })
            .map((item, index) => {
              // if (index < 2) {
              if (item.brandCode === '速写') {
                item.brandCode = 'CROQUIS'
              } else if (item.brandCode === 'A PERSONAL NOTE 73') {
                item.brandCode = 'APN 73'
              } else if (item.brandCode === 'jnby by JNBY') {
                item.brandCode = '童装'
              } else if (item.brandCode === 'Pomme de terre') {
                item.brandCode = '蓬马'
              } else if (item.brandCode === 'jnby for mini') {
                item.brandCode = '婴童'
              } else {
                item.brandCode = item.brandCode
              }
              this.dataList.push(item)
              // }
              this.dataList.map(item => {
                const leftList = []
                const rightList = []

                item.relationSkc.map((subitem, index) => {
                  if (index % 2 == 0) {
                    leftList.push(subitem)
                  } else {
                    rightList.push(subitem)
                  }
                })
                // this.patternList.risk.map(item => {
                //   this.riskList.map(riskitem => {
                //     if (item == riskitem.value) {
                //       this.risks.push(riskitem)
                //     }
                //   })
                // })
                item.leftList = leftList
                item.rightList = rightList
              })
            })
        }
      } else {
        this.$message.error(res.msg || res.message)
      }
      } catch (error) {
        
      }finally {
        this.loading = false
      }
    }
  }
}
</script>
<style>
@media print {
  @page print-landscape {
    size: landscape;
  }
}

div.print-landscape {
  page: print-landscape;
}

#two-ele .ant-list-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>

<style lang="less" scoped>
@media print {
  .no-print {
    display: none;

  }
  body {
    height: auto;
    }

  // #imgtitle {
  //   margin-top: 30px;
  // }

  #skc {
    // margin-top: 30px;
  }

  #head {
    opacity: 100 !important;
  }



  .page-wrap {
    width: 100%;
  }
}

#print {
  margin-bottom: 10px;
  // display: flex;
  flex-direction: column;
}

// #app:not(:last-child) {
//   page-break-after: always;
// }
.spin-content {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 30px;
  color: black;
}

#imgs {
  display: flex;
  width: 100%;
  padding: 20px;
  justify-content: space-between;
  page-break-after: always;
}

#imgs .left {
  width: 59%;
}

#imgs .right {
  width: 41%;
  display: flex;
  flex-direction: column;
}

#imgs .left .imgList {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.ant-list-items {
  display: flex;
  flex-wrap: wrap;
}

#imgs .right .item {
  margin-bottom: 10px;
}

#imgs .right .item .content {
  width: 55%;
  padding-left: 10px;
}

#imgs .right .item .content p {
  font-weight: 500;
  word-break: break-all;
}

#imgs .right img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

#patternText {
  margin: 0 10px;
}

#skc {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 100%;
  text-align: center;
  page-break-after: always;
}

#skc .skcItem {
  padding: 10px;
}

img {
  page-break-inside: avoid;
}

#head {
  opacity: 0;
}

#head th {
  color: #abc577;
  font-size: 24px;
  display: flex;
  margin-left: 20px;
  align-items: end;
  // position: fixed;
  // left: 20px;
}

.page-wrap tfoot td {
  /* height: 30px;
    line-height: 30px; */
  color: #abc577;
  font-size: 24px;
  display: flex;
  margin-left: 20px;
  // position: fixed;
  // left: 20px;
}

// .page-wrap tfoot td {
//   color: #abc577;
//   position: fixed;
//   bottom: 20px;
//   border-bottom: 1px dotted #abc577;
//   border-bottom-width: 0;
// }

#print p {
  margin-top: 0;
  margin-bottom: 0;
}

.half {
  width: 50%;
}
</style>
<style>
#table .ant-table {
  font-size: 12px;
}

#table .table-color {
  color: #f5222d;
}

/* @media print {
 html {
    zoom: 70%;
  }
} */
</style>
